<template>
  <div class="search">
    <Card>
      <div class="totalCount">
        <p class="countTitle">合计</p>
        <div class="totalList">
          <p>
            平台的分佣总额：<span>{{ allData.adminMoney }}</span>
          </p>
          <p>
            区域的分佣总额：<span>{{ allData.qyMoney }}</span>
          </p>
          <p>
            订单焕贝额：<span>{{ allData.flowPrice }}</span>
          </p>
          <p>
            天使合伙人的分佣总额：<span>{{ allData.tsMoney }}</span>
          </p>
        </div>
      </div>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="75"
          class="search-form"
        >
          <Form-item label="时间">
            <DatePicker
              v-model="outSelectDate"
              type="month"
              format="yyyy-MM"
              clearable
              @on-change="outSelectDateRange"
              placeholder="选择时间"
              style="width: 200px"
            >
            </DatePicker>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
          <Button class="search-btn" type="primary" @click="handleReset"
            >重置</Button
          >
          <!-- <download-excel
            class="export-excel-wrapper"
            :data="data"
            :fields="fields"
            :fetch="exportOrder"
            name="C端会员统计.xls"
          >
            <Button type="info" class="export"> 导出 </Button>
          </download-excel> -->
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50, 100]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import {
  GetCommissionDistributionMember,
  GetCommissionDistributionMemberAll,
} from "@/api/report.js";
import region from "@/views/agent-manage/region";
import JsonExcel from "vue-json-excel";

export default {
  name: "membershipFee",
  components: {
    region,
    "download-excel": JsonExcel,
  },
  data() {
    return {
      // 表格的表头以及内容
      fields: {
        会员昵称: "name",
        注册手机号: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        级别: "levelName",
        区域: "region",
        推广人手机号: {
          field: "tjMobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        会员费_会员费总额_人民币: {
          field: "dkfXj",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        会员费_会员费总额_焕贝: {
          field: "dkfHb",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_收入_现金充值总额: {
          field: "czSrXj",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_收入_兑换焕贝总额: {
          field: "czSrHb",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_收入_转入: {
          field: "czSrZr",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_支出_消费焕贝总额: {
          field: "czZcXf",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_焕贝余额: {
          field: "czYe",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
      },
      loading: true, // 表单加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        mobile: "",
        tjMobile: "", //推广人手机号
        startTime: "",
        endTime: "",
        regionId: [],
      },
      outSelectDate: "", // 起止时间
      columns: [
        {
          title: "用户",
          align: "center",
          children: [
            {
              title: "订单号",
              key: "sn",
              align: "center",
              tooltip: true,
              width: "250",
            },
            {
              title: "订单支付时间",
              key: "createTime",
              align: "center",
              tooltip: true,
              width: "150",
            },
            {
              title: "手机号",
              key: "mobile",
              align: "center",
              tooltip: true,
              width: "150",
            },
            {
              title: "用户昵称",
              key: "realName",
              align: "center",
              tooltip: true,
              width: "120",
            },
            {
              title: "身份类型",
              key: "roleName",
              align: "center",
              tooltip: true,
              width: "100",
            },
            {
              title: "区域",
              key: "locationName",
              align: "center",
              tooltip: true,
              width: "200",
            },
            {
              title: "级别/角色",
              key: "gradeName",
              align: "center",
              tooltip: true,
              width: "100",
            },
            {
              title: "分佣类型",
              key: "typeName",
              align: "center",
              tooltip: true,
              width: "100",
            },
            {
              title: "焕贝额",
              key: "flowPrice",
              align: "center",
              tooltip: true,
              width: "150",
            },
          ],
        },
        {
          title: "天使合伙人（两类）",
          align: "center",
          children: [
            {
              title: "手机号",
              key: "tsMobile",
              align: "center",
              tooltip: true,
              width: "150",
            },
            {
              title: "用户昵称",
              key: "tsRealName",
              align: "center",
              tooltip: true,
              width: "100",
            },
            {
              title: "店铺昵称",
              key: "tsStoreName",
              align: "center",
              tooltip: true,
              width: "100",
            },
            {
              title: "分佣焕贝额",
              key: "tsMoney",
              align: "center",
              tooltip: true,
              width: "150",
            },
          ],
        },
        {
          title: "区域",
          align: "center",
          children: [
            {
              title: "手机号",
              key: "qyMobile",
              align: "center",
              tooltip: true,
              width: "150",
            },
            {
              title: "用户昵称",
              key: "qyRealName",
              align: "center",
              tooltip: true,
              width: "100",
            },
            {
              title: "分佣焕贝额",
              key: "qyMoney",
              align: "center",
              tooltip: true,
              width: "150",
            },
          ],
        },
        {
          title: "平台",
          align: "center",
          children: [
            {
              title: "分佣焕贝额",
              key: "adminMoney",
              align: "center",
              tooltip: true,
              width: "150",
            },
          ],
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      allData: {}, //合计数据
    };
  },
  methods: {
    // 导出订单
    async exportOrder() {
      if (this.searchForm.regionId) {
        this.searchForm.regionId = this.searchForm.regionId.toString();
      }
      const params = JSON.parse(JSON.stringify(this.searchForm));
      params.pageNumber = 1;
      params.pageSize = 999999999;
      const result = await GetCommissionDistributionMember(params);
      if (result.success) {
        if (result.result.page.records.length === 0) {
          this.$Message.warning("暂无可导出数据");
          return [];
        } else {
          return result.result.page.records;
        }
      } else {
        this.$Message.warning("导出数据失败，请重试");
      }
    },
    // 重置
    handleReset() {
      this.outSelectDate = "";
      this.searchForm = {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        mobile: "",
        tjMobile: "", //推广人手机号
        startTime: "",
        endTime: "",
        regionId: [],
      };
      // this.$refs.region.addr = [];
      this.getData();
    },
    // 起止时间从新赋值
    outSelectDateRange(v) {
      if (v) {
        this.searchForm.searchTime = v;
      }
    },
    // 选中的地址
    selectedRegion(val) {
      this.searchForm.regionId = val[0];
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    //查询会员列表
    getData() {
      this.loading = true;
      this.searchForm.regionId = this.searchForm.regionId.toString();
      GetCommissionDistributionMember(this.searchForm).then((res) => {
        if (res.result) {
          this.loading = false;
          this.data = [];
          this.data = res.result.records;
          this.total = res.result.total;
          this.getDataAll();
        }
      });
    },
    getDataAll() {
      GetCommissionDistributionMemberAll(this.searchForm).then((res) => {
        this.allData = res.result;
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.export-excel-wrapper {
  margin-left: 10px;
}
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
.totalCount {
  width: 100%;
  height: auto;
  .countTitle {
    width: 100%;
    height: auto;
    font-weight: bold;
    font-size: 24px;
  }
  .totalList {
    display: flex;
    align-items: center;
    p {
      margin-right: 20px;
      font-size: 18px;
      span {
        margin-left: 10px;
      }
    }
  }
}
</style>
